<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        /* .audoi{
            float: left;
        } */
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;

        }

        audio,
        .text,
        .center-left {
            margin-left: 20px;
            outline:none;
        }

        .audio {
            width: 50%;
            text-align: center;
            margin-left: 240px;
            margin-top: 40px;
        }

        h1 {
            margin: 0;
            margin-left: 20px;
            padding: 5px;
        }


        #box {
            width: 100%;

            background-color: pink;
        }

        .box1 {
            width: 100%;

            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .li {
            list-style-type: none;
            padding: 10px;
            cursor: pointer;
        }

        .index {
            margin-right: 20px;
            color: coral;
        }

        .center {
            display: flex;
            width: 100%;
            height: 560px;
            /* border: 1px solid red; */
            justify-content: center;

        }

        .center-left {
            padding-left: 20px;
            width: 12%;
            height: 500px;
            border: 3px solid black;
            overflow: hidden;
            overflow-y: auto;
        }

        .imgs {
            position: relative;
            top: 20px;
            display: flex;
            opacity: .9;
            flex: 1;
            justify-content: center;
        }

        .playing {
            animation: play 5s infinite linear;

        }

        @keyframes play {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .img {

            width: 500px;
            height: 500px;
            border-radius: 50%;
            /* background-color: black; */
            /* display: none; */
        }

        .center-right {
            width: 30%;
            margin-right: 10px;
            height: 500px;
            border: 3px solid black;
            overflow: hidden;
            overflow-y: auto;
        }

        .lyr {
            position: absolute;
            height: 500px;
            /* border: 1px solid red; */
            overflow: hidden;
            overflow-y: auto;
            list-style-type: none;
        }

        .lyr li {

            padding: 10px;
            cursor: pointer;
            color: blue;
            font-weight: bold;
            animation: lyr 160s infinite linear;
        }
        @keyframes lyr {
            from {
                transform:translateY(-10px);
            }

            to {
                transform: translateY(-1000px);
            }
        }

        /* 歌词滚动条样式 */
        .lyr::-webkit-scrollbar {

            width: 10px;

        }

        .lyr::-webkit-scrollbar-track {

            background: #999;

            border-radius: 2px;

        }

        .lyr::-webkit-scrollbar-thumb {

            background: red;

            border-radius: 10px;

        }

        .lyr::-webkit-scrollbar-thumb:hover {

            background: #333;

        }

        .lyr::-webkit-scrollbar-corner {

            background: #179a16;

        }

        /* 歌曲列表滚动条样式 */
        .center-left::-webkit-scrollbar {

            width: 10px;

        }

        .center-left::-webkit-scrollbar-track {

            background: #999;

            border-radius: 2px;

        }

        .center-left::-webkit-scrollbar-thumb {

            background: red;

            border-radius: 10px;

        }

        .center-left::-webkit-scrollbar-thumb:hover {

            background: #333;

        }

        .center-left::-webkit-scrollbar-corner {

            background: #179a16;

        }

        /* 评论列表滚动条样式 */
        .center-right::-webkit-scrollbar {

            width: 10px;

        }

        .center-right::-webkit-scrollbar-track {

            background: #999;

            border-radius: 2px;

        }

        .center-right::-webkit-scrollbar-thumb {

            background: red;

            border-radius: 10px;

        }

        .center-right::-webkit-scrollbar-thumb:hover {

            background: #333;

        }

        .center-right::-webkit-scrollbar-corner {

            background: #179a16;

        }

        /* :style = '{background-image:url("imgurl")}' */
    </style>
</head>

<body>
    <div id="box">
        <!-- :style = 'imgobj'加动态背景 -->
        <div class="box1">
            <h1>音乐大厅</h1>
            <input class="text" type="text" v-model='text' @keyup.enter='sousuo'>&nbsp;<button class="button"
                @click='sousuo'>搜索</button>
            <div class="center">
                <ul class="center-left">
                    <li class="li" v-for='(items,index) in music' @click='bofang(items.id)'>
                        <p><span class="index">{{index+1}}</span>{{items.name}}</p>
                    </li>
                </ul>
                <div class="imgs">
                    <img class="img" :class='{playing:isplaying}' :src='imgurl' alt="">
                    <ul class="lyr">
                        <li v-for='(items,index) in lyric'>{{items}}</li>
                    </ul>

                </div>
                <h1>评论</h1>
                <ul class="center-right">
                    <li class="li" v-for='(items,index) in pinglun'><span
                            class="index">{{index+1}}</span>{{items.content}}</li>
                </ul>

            </div>
            <audio ref='audio' @play='play' @pause='pause' :src="musicurl" controls autoplay loop
                class="audio"></audio><br><br>
        </div>
    </div>



    <script src='./vue.js'></script>
    <script src="./axios.min.js"></script>
    <script>
        var app = new Vue({
            el: '#box',
            data: {
                imgurl: '',
                imgobj: {

                },
                text: '',
                music: [],
                musicurl: '',

                pinglun: [],
                isplaying: false,
                lyric: ''
            },
            methods: {
                sousuo: function () {
                    var that = this;
                    axios.get('https://autumnfish.cn/search?keywords=' + this.text).then(function (res) {
                        that.music = res.data.result.songs;
                    }, function (err) {
                        console.log(err);
                    })
                },
                bofang: function (musicid) {
                    var that = this;
                    //歌曲播放
                    axios.get('https://autumnfish.cn/song/url?id=' + musicid).then(function (res) {

                        that.musicurl = res.data.data[0].url;
                        // console.log(that.musicurl)
                    }, function (err) {
                        console.log(err)
                    }),
                        //歌曲获取封面图片
                        axios.get('https://autumnfish.cn/song/detail?ids=' + musicid).then(function (res) {
                            // console.log(res.data.songs[0].al.picUrl)
                            that.imgurl = res.data.songs[0].al.picUrl;
                            that.imgobj = {
                                'background-image': `url('${that.imgurl}')`
                            };
                            // console.log(that.imgobj)
                        }, function (err) {

                            console.log(err)
                        }),
                        //歌曲评论
                        axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicid).then(function (res) {
                            // console.log(res.data.hotComments)
                            that.pinglun = res.data.hotComments
                        }, function (err) {
                            console.log(err)
                        }),
                        //歌词
                        axios.get('https://autumnfish.cn/lyric?id=' + musicid).then(function (res) {
                            // console.log(res.data.lrc.lyric.split("\n"))
                            that.lyric = res.data.lrc.lyric.split("\n")
                        }, function (err) {
                            console.log(err)
                        })
                    // 'background-image'+':' +'url('+this.imgurl+')'

                },
                play: function () {
                    // console.log('开始')
                    this.isplaying = true
                },
                pause: function () {
                    // console.log('结束')
                    this.isplaying = false
                }










            }
        })
    </script>
</body>

</html>